<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            body{
                background-color: #fff;
            }
            div{
                margin: 10px auto;
                width: 190px;
                height: 500px;
                background-color: #fff;
                box-sizing: border-box;
                border: 1px solid #ccc;
            }
            div h2{
                display:inline-block;
                width: 188px;
                height: 30px;
                margin: 0;
                background-color: #eee;
                text-align: center;

            }
            div ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            div ul li{
                width: 180px;
                height: 150px;
                margin: 5px;
                position: relative;
                overflow: hidden;
            }
            div ul li img{
                position: absolute;
            }
            div ul li span{
                width: 180px;
                height: 20px;
                text-align: center;
                display: inline-block;
                position: absolute;
                bottom: 0;
                left: 0;
                color: white;
                font-size: 12px;
                line-height: 1.5;
            }
            .lis1 span{
                background-color: #CF5460;
            }
            .lis2 span{
                background-color: #184B51;
            }
            .lis3 span{
                background-color: #2975AB;
            }
            .span1{
                bottom: 0;
            }
            .span2{
                bottom: -20px;
            }
            .img1{
                right: 0;
            }
            .img2{
                right: -180px;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>专辑推荐</h2>
            <ul>
                <li class="lis1">
                    <img class="img1" src="../img/1_1.jpg">
                    <img class="img2" src="../img/1_2.jpg">
                    <span class="span1">COCOON/可可尼</span>
                    <span class="span2">几何为网/极致绚烂</span>
                </li>
                <li class="lis2">
                    <img class="img1" src="../img/2_1.jpg">
                    <img class="img2" src="../img/2_2.jpg">
                    <span class="span1">INSUN/恩裳</span>
                    <span class="span2">2013/春印象</span>
                </li>
                <li class="lis3">
                    <img class="img1" src="../img/3_1.jpg">
                    <img class="img2" src="../img/3_2.jpg">
                    <span class="span1">JNBY/江南布衣</span>
                    <span class="span2">NANMENG/南梦</span>
                </li>
            </ul>
        </div>
    </body>
</html>

<script>

    $('div ul li').hover(function(){
        $(this).children('.img1').stop().animate({
            left:'-180px'
        },500);
        $(this).children('.img2').stop().animate({
            right:0
        },500);
        $(this).children('.span1').stop().animate({
            bottom:-20
        },500)
        $(this).children('.span2').stop().animate({
            bottom:0
        },500)
    },function(){
        $(this).children('.img1').stop().animate({
            left:0
        },500);
        $(this).children('.img2').stop().animate({
            right:'-180px'
        },500);
        $(this).children('.span1').stop().animate({
            bottom:0
        },500)
        $(this).children('.span2').stop().animate({
            bottom:-20
        },500)
    })


</script>